<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .red {
      color:red
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="form-group">
        <div class="input-group">
            <!-- 使用自定义指令来让input自动获取焦点 -->
            <input v-focus type="text" class="form-control" placeholder="搜索">
        </div>
    </div>
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>资产名称</th>
            <th>价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr v-for="(循环变量，索引变量) in 数据"> -->
          <tr v-for="(item,idx) in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <!-- 如果价格超过100，就有red这个类 -->
            <!-- <td class="red">{{item.price}}</td> -->

            <!-- 三元
            -->
            <!-- <td :class='item.price > 100 ? "red" : ""'>{{item.price}}</td> -->
            
            <!-- :class= 放一个对象
               如果对象中的属性值是true,
               则把对象中的属性名添加到类名中
            -->

            <!-- 过滤器：
              把12345 ===> ￥12,345 
              1. 在前面加一个￥
              2. 千分位的分隔，加,
            -->
            <!-- <td :class="{red:item.price>100}">{{item.price | currency}}</td> -->
            <td :class="{red:item.price>100}">{{item.price | $}}</td>
           
            <td><a href="#" @click.prevent="hDel(idx)">删除</a></td>
          </tr>
        </tbody>
      </table>

      <!-- 添加资产 -->
      <form class="form-inline">
        <div class="form-group">
            <div class="input-group">
                <input v-model.trim="name" type="text" class="form-control" placeholder="资产名称">
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
          <div class="input-group">
              <input v-model.trim.number="price" type="text" class="form-control" placeholder="价格">
          </div>
      </div>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <!-- 阻止表单提交 -->
        <button class="btn btn-primary" @click.prevent="hAdd">添加资产</button>
      </form>
    </div>
  </div>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/1.0.11/vue.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script>
      // 目标： 用vue.js实现
      // 1. 把表格数据显示出来
      // 2. 实现删除功能
      // 3. 添加功能
      // 4. 标注：如果价格超过100，标红色显示。
      

      // 步骤：
      // 1.引入vue.js
      // 2. 实例化vue对象 
      //    三大件： el,data,methods
      // 3. 实现功能
      //   (1) 循环渲染数据： v-for
      //   (2) 删除数据：@click,并传入要删除的下标
      //   (3) 标注红色 动态的添加样式，只有>100才加。 使用对象来绑定class.
      //   (4) 添加功能
      //     1) 基本输入框结构
      //     2) 点击添加
      //      - 收集用户的输入信息:v-model,补一些必要的修饰符。
      //      - 简单判空
      //      - 添加到list中

      const vm = new Vue({
        el: '#app',
        data: {
           name: '', // 名称
           price: 0, // 价格
           list: [
              { id: 1, name: '外套', price: 199 },
              { id: 2, name: '裤子', price: 34 },
              { id: 3, name: '鞋', price: 25.4 },
              { id: 4, name: '头发', price: 19900 }
          ]
        },
        methods: {
          hDel (index) {
            console.log('要删除的下标是',index)
            // 删除数组中指定位置的元素
            this.list.splice(index, 1)
          },
          hAdd () {
              // 收集用户的输入信息
              // 简单判空
              if(this.name ==='') {
                return 
              }

              if(this.price == '' || this.price < 0) {
                return 
              }

              // 添加到list中
              console.log(this.name,this.price)
              // 向数组中添加一个元素
              let id = 1
              if (this.list.length > 0) {
                // 新的id = 数组中最后一个元素的id值+1
                id = this.list[this.list.length-1].id + 1
              }

              this.list.push({
                id: id,
                name: this.name,
                price: this.price
              })


          }
        },
        filters: {
          // 定义过滤器
          //   过滤器的名字就是$
          $: function (value, _currency) {
            // 正则表达式： 全局匹配 三个连续的，且之后也是数值的 数值
            var digitsRE = /(\d{3})(?=\d)/g;

            value = parseFloat(value);
            // 判断是否数值
            if (!isFinite(value) || !value && value !== 0) return '';

            // 设置金额的符号
            _currency = _currency != null ? _currency : '￥';

            // 取绝对值，保存两位有效数字，转成字符串
            var stringified = Math.abs(value).toFixed(2);

            // 获取整数部分。 -3 表示倒数3位
            var _int = stringified.slice(0, -3);

            // 整数部分以3为基准长度划分，剩下几位
            var i = _int.length % 3;

            // 取出头部
            // 12345 ---> 12,
            var head = i > 0 ? _int.slice(0, i) + (_int.length > 3 ? ',' : '') : '';

            // 取出小数字部分
            var _float = stringified.slice(-3);

            // 判断符号
            var sign = value < 0 ? '-' : '';

            // 整体输出
            return _currency + sign + head + _int.slice(i).replace(digitsRE, '$1,') + _float;
          }
          // $: function(value) {
          //   // 1. 在前面加一个￥
          //   // 2. 千分位的分隔，加, 
          //   //    有难度，与vue,与过滤器没有关系。请大家自己在下面做练习。  
          //   //    我们这里直接去vue的源码中抄一段出来，直接用。
          //   // 在Vue1.0版本中，它是自带这个货币金额过滤器

          //   console.log(value)
          //   return '￥'+value
          // }
        },
        directives: {
          focus: {
            inserted (el) {
              el.focus()
            }
          }
        }

      })


      // list: [
      //     { id: 1, name: '外套', price: 99 },
      //     { id: 2, name: '裤子', price: 34 },
      //     { id: 3, name: '鞋', price: 25.4 },
      //     { id: 4, name: '头发', price: 19900 }
      // ]
  </script>
</body>
</html>